﻿<!doctype html>



<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script>

/*	$(function($){ 
		var re_name =  /^[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]{2,4}$/;
		var uname=$('#name');

	
		uname.keyup( function() {
			var s = $("#l1"); 
					 
			if (uname.val().length == 0) { // 입력 값이 없을 때
				s.text(''); // strong 요소에 포함된 문자 지움
			} else if (uname.val().length < 2) { // 입력 값이 3보다 작을 때
				s.text('길이 : 짧음'); // strong 요소에 문자 출력
			} else if (uname.val().length > 4) { // 입력 값이 16보다 클 때
				s.text('길이 : 김'); // strong 요소에 문자 출력
			} else { // 입력 값이 3 이상 16 이하일 때
				s.text('길이 : 적당'); // strong 요소에 문자 출력
			}
 
		 	if (re_name.test(uname.val()) != true){
				$("#name").css("border","1px solid red");
			}else{
				$("#name").css("border","1px solid #999");
			}
 
		});  

		var re_id = /^[a-z0-9_-]{3,10}$/;
		var uid=$("#userID");
	
		uid.keyup( function() {
			var e = $("#l2"); 
					 
			if (uid.val().length == 0) { // 입력 값이 없을 때
				e.text(''); // strong 요소에 포함된 문자 지움
			} else if (uid.val().length < 4) { // 입력 값이 3보다 작을 때
				e.text('길이 : 짧음'); // strong 요소에 문자 출력
			} else if (uid.val().length > 10) { // 입력 값이 16보다 클 때
				e.text('길이 : 김'); // strong 요소에 문자 출력
			} else { // 입력 값이 3 이상 16 이하일 때
				e.text('길이 : 적당'); // strong 요소에 문자 출력
			}
 
		 	if (re_id.test(uid.val()) != true){
				$("#userID").css("border","1px solid red");
			}else{
				$("#userID").css("border","1px solid #999");
			}
 
		});  


		var re_pwd = /^[a-z0-9_-]{3,10}$/;
		var upwd=$("#userPwd");
	
		upwd.keyup( function() {
			var s = $("#l3"); 
					 
			if (upwd.val().length == 0) { // 입력 값이 없을 때
				s.text(''); // strong 요소에 포함된 문자 지움
			} else if (upwd.val().length < 4) { // 입력 값이 3보다 작을 때
				s.text('길이 : 짧음'); // strong 요소에 문자 출력
			} else if (upwd.val().length > 10) { // 입력 값이 16보다 클 때
				s.text('길이 : 김'); // strong 요소에 문자 출력
			} else { // 입력 값이 3 이상 16 이하일 때
				s.text('길이 : 적당'); // strong 요소에 문자 출력
			}
 
		 	if (re_pwd.test(upwd.val()) != true){
				$("#userPwd").css("border","1px solid red");
			}else{
				$("#userPwd").css("border","1px solid #999");
			}
 
		});  





		var re_cpwd = /^[a-z0-9_-]{3,10}$/;
		var ucpwd=$("#checkPwd");
	
		ucpwd.keyup( function() {
			var s = $("#l4"); 
					 
			if (ucpwd.val().length == 0) { // 입력 값이 없을 때
				s.text(''); // strong 요소에 포함된 문자 지움
			} else if (ucpwd.val().length < 4) { // 입력 값이 3보다 작을 때
				s.text('길이 : 짧음'); // strong 요소에 문자 출력
			} else if (ucpwd.val().length > 10) { // 입력 값이 16보다 클 때
				s.text('길이 : 김'); // strong 요소에 문자 출력
			} else { // 입력 값이 3 이상 16 이하일 때
				s.text('길이 : 적당'); // strong 요소에 문자 출력
			}
 
		 	if (re_cpwd.test(ucpwd.val()) != true){
				$("#checkPwd").css("border","1px solid red");
			}else{
				$("#checkPwd").css("border","1px solid #999");
			}
 
		}); 
		
		
		


		var re_birthyear = /^[0-9]{4}$/;
		var ubirthyear=$("#birthYear");
	
		ubirthyear.keyup( function() {
		 	if (re_birthyear.test(ubirthyear.val()) != true){
				$("#birthYear").css("border","1px solid red");
			}else{
				$("#birthYear").css("border","1px solid #999");
			}
 
		}); 
		
		
		
		
		var re_birthday = /^(0[1-9]|[12][0-9]|3[01])$/;
		var ubirthday=$("#birthDay");
	
		ubirthday.keyup( function() {
		 	if (re_birthday.test(ubirthday.val()) != true){
				$("#birthDay").css("border","1px solid red");
			}else{
				$("#birthDay").css("border","1px solid #999");
			}
 
		}); 



		var re_phonenum01 = /^([0]{1}[1]{1}[016789]{1})[-]([0-9]{3,4})[-]([0-9]{4})$/;
		var uphonenum01=$("#phoneNum01");
	
		uphonenum01.keyup( function() {
		 	if (re_phonenum01.test(uphonenum01.val()) != true){
				$("#phoneNum01").css("border","1px solid red");
			}else{
				$("#phoneNum01").css("border","1px solid #999");
			}
 
		}); 





		var re_mailaddress =  /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
		var umailaddress=$("#mailAddress");
	
		umailaddress.keyup( function() {
		 	if (re_mailaddress.test(umailaddress.val()) != true){
				$("#mailAddress").css("border","1px solid red");
			}else{
				$("#mailAddress").css("border","1px solid #999");
			}
 
		}); 

		$("#form1").submit(function(){
			var checkpwd1=$('#userPwd').val();
			var checkpwd2=$('#checkPwd').val();

			if (re_name.test(uname.val()) != true){
				alert("이름을 다시 입력해주세요");
				return false;
			}
		 	if (re_id.test(uid.val()) != true){
				alert("아이디를 다시 입력해주세요");
				return false;
			}
		 	if (re_pwd.test(upwd.val()) != true){
				alert("비밀번호를 다시 입력해주세요");
				return false;
			}
		 	if (checkpwd1!=checkpwd2){
				alert("비밀번호 확인을 다시 입력해주세요");
				return false;
			}
		 	if (re_birthyear.test(ubirthyear.val()) != true){
				alert("태어난 년도를 다시 입력해주세요");
				return false;
			}
		 	if (re_birthday.test(ubirthday.val()) != true){
				alert("태어난 날짜를 다시 입력해주세요");
				return false;
			}
		 	if (re_phonenum01.test(uphonenum01.val()) != true){
				alert("전화번호를 다시 입력해주세요");
				return false;
			}
		 	if (re_mailaddress.test(umailaddress.val()) != true){
				alert("메일주소를 다시 입력해주세요");
				return false;
			}
			
				var antiAuto=document.forms["form1"]["antiAuto"].value; 
				if(picCheck==1){
					if(	antiAuto!="선형이조화이팅"){
						alert("인간인증 문자를 제대로 입력하세요");
						return false;
					}
				}else if(picCheck==2){
					if(antiAuto!="소이는츄리닝이좋아요"){
						alert("인간인증 문자를 제대로 입력하세요");
						return false;
					}
				}else if(picCheck==3){
					if(antiAuto!="수경이도키컸으면"){
						alert("인간인증 문자를 제대로 입력하세요");
						return false;
					}
				}else if(picCheck==4){
					if(antiAuto!="정훈잘참여할게요"){
						alert("인간인증 문자를 제대로 입력하세요");
						return false;
					}
				}else if(picCheck==5){
					if(antiAuto!="상호안녕하세요세계"){
						alert("인간인증 문자를 제대로 입력하세요");
						return false;
					}
				}else{
					if(antiAuto!="주원오빠가젤멋짐"){
						alert("인간인증 문자를 제대로 입력하세요");
						return false;
					}		
				}
			
			
			
		});
	});

*/

</script>

<style>
body{
	/*background-color:#E4CDF8;*/
}
#wrap{
	margin:0px auto;
	width:100%;
}
#form1{
	margin:0px auto;
	width:80%;
	position:relative;
	
	/* border:2px solid #C36; */
}
input{
	height:30px;
	width:100%;
	border:1px solid #999;
	border-radius:10px;
}
header{
	margin:0px auto;
	height:30%;
}
#no_img{
	margin:0px auto;
	text-align:center;
}
</style>
</head>

<body>
    <header>
        <div id="no_img"><img src="image/nogada.jpg" width="300px" height="150px"></div>
    </header>
    	<hr>
        
        
<div id="wrap">

// 테스트임  3번째 수정//
	<form id="form1" name="form1" action="/jsp/member/create.jsp"  method="post">
		<!-- <form id="form1" action="asd.html" onSubmit="return create()" method="post"> -->
			<h2 style="color:red;">NOGADA 회원 가입</h2>

        	<label class="label01">이름</label><label id="l1" style="float:right;"></label><br><input type = "text" id="name" name="name" placeholder="이름을 입력하세요" maxlength="4"><br><br>
			<label class="label01">아이디</label><label id="l2" style="float:right;"></label><br><input type = "text" id="userID" name="userID" placeholder="아이디를 입력하세요" maxlength="10"><br><br>
			<label class="label01">비밀번호 만들기</label><label id="l3" style="float:right;"></label><br>
            	<input type = "password" id="userPwd" name="userPwd" placeholder="비밀번호를 입력하세요" maxlength="10"><br><br>
			<label class="label01">비밀번호 확인</label><label id="l4" style="float:right;"></label><br><input type = "password" id="checkPwd" name="checkPwd" placeholder="비밀번호를 재입력하세요" maxlength="10"><br><br>
			<label class="label01">생년월일 (YYYY DD형식 - 예:1980 02)</label><br><input type = "text" id="birthYear" name="birthYear" placeholder="연도" maxlength="4" style="width:35%;">
				<select id="where" name="where" class="blind" style="width:25%; height:33px;">
					<option value="1" selected="selected">1월</option>
					<option value="2">2월</option>
                    <option value="3">3월</option>
                    <option value="4">4월</option>
                    <option value="5">5월</option>
                    <option value="6">6월</option>
                    <option value="7">7월</option>
                    <option value="8">8월</option>
                    <option value="9">9월</option>
                    <option value="10">10월</option>
                    <option value="11">11월</option>
                    <option value="12">12월</option>
				</select>
                                <Input type = "text" id="birthDay" name="birthDay" placeholder="일" maxlength="2" style="width:30%;"><br><br>
                 <label class="label01">성별</label><br>
                 	<select id="sex" name="sex" class="blind" style="width:100%; height:33px;">
						<option selected="selected" value="남성">남성</option>
						<option value="여성">여성</option>
                    </select><br><br>
				<label class="label01">핸드폰 (01X-XXX-XXXX 또는 01X-XXXX-XXXX형식)</label><br><input type = "text" id="phoneNum01" name="phoneNum01" placeholder="핸드폰 번호" style="width:100%;"><br><br>
          <!--      <input type = "text" id="phoneNum02" name="phoneNum02" placeholder="전화 번호" style="width:60%;"> -->
                <label class="label01">e메일</label><br><input type = "text" id="mailAddress" name="mailAddress"  placeholder="이메일"><br><br>
                <label class="label01">자동가입 방지</label><br>
                <div><img id="picChk" src="image/a_1.jpg" width="100%" height="20%"></div>
	        	<input type = "text" id="antiAuto" name="antiAuto" placeholder="그림에 보이는 대로 적어주세요"><br><br>
                <hr>
       			<h2 style="color:red;">하단의 정보를 입력하시면 정회원으로 가입이 가능합니다</h2>
              
				<label>자신 있는 분야는?</label><br>
        		<input type="checkbox" name="check01" style="width:10px; vertical-align:middle;" value="삽질">삽질<br>
                <input type="checkbox" name="check01" style="width:10px; vertical-align:middle;" value="벽돌운반">벽돌 운반<br>
                <input type="checkbox" name="check01" style="width:10px; vertical-align:middle;" value="공구리">공구리<br>
                <input type="checkbox" name="check01" style="width:10px; vertical-align:middle;" value="오야지">오야지<br><br>
            
        		<label>해당 사항에 체크해주세요</label><br>
            	<input type="checkbox" name="check02" style="width:10px; vertical-align:middle;" value="전 지역 가능">전 지역 가능<br>
                <input type="checkbox" name="check02" style="width:10px; vertical-align:middle;" value="24시간 무교대 가능">24시간 무교대 가능<br>
                <input type="checkbox" name="check02" style="width:10px; vertical-align:middle;" value="신용 불량자">신용 불량자<br>
                <input type="checkbox" name="check02" style="width:10px; vertical-align:middle;" value="노숙 가능">노숙 가능<br>
            	<input type="submit" value="회원 가입">
            
	</form>


</div>
</body>
<script>
	var picCheck=Math.floor(Math.random()*6+1);
	
	//a_1 주원, b_1 소이, c_1 수경, d_1 정훈, e_1 상호, f_1 선형//
	if(picCheck==1){
		document.getElementById("picChk").src="image/f_1.jpg";	
	}else if(picCheck==2){
		document.getElementById("picChk").src="image/b_1.jpg";	
	}else if(picCheck==3){
		document.getElementById("picChk").src="image/c_1.jpg";	
	}else if(picCheck==4){
		document.getElementById("picChk").src="image/d_1.jpg";	
	}else if(picCheck==5){
		document.getElementById("picChk").src="image/e_1.jpg";	
	}else{
		document.getElementById("picChk").src="image/a_1.jpg";	
	}
	
	
	
	
	
	
	
</script>
</html>
